<template>
	<view class="tui-container">
		<view class="tui-login__header">
			<image class="tui-header__img" mode="widthFix" src="/static/images/login/img_login_bg_3x.png"></image>
			<view class="tui-header__inner">
				<!-- #ifndef H5 -->
				<tui-navigation-bar @init="initNavigation">
					<!-- #ifndef MP-ALIPAY || MP-BAIDU -->
					<view class="tui-header__icon" :style="{ marginTop: top + 'px' }">
						<tui-icon name="arrowleft" color="#fff" unit="rpx" :size="68" @click="back"></tui-icon>
					</view>
					<!-- #endif -->
				</tui-navigation-bar>
				<!-- #endif -->
				<view class="tui-header__title" :style="{paddingTop:top+50+'px'}">
					<text class="tui-title__text">注册</text>
					<text class="tui-sub__text">欢迎注册安培一考通</text>
				</view>
			</view>
		</view>
		<view class="tui-form__box">
			<image class="tui-login__img" src="/static/images/login/img_login_3x.png" mode="widthFix"></image>
			<tui-input name="mobile" v-model="mobile" type="number" maxlength="11" padding="32rpx 0 20rpx" :lineLeft="false" :size="30" placeholder="手机号码">
			</tui-input>
			<tui-input name="verification_code" v-model="verification_code" type="number" maxlength="6" padding="64rpx 0 20rpx" :lineLeft="false" :size="30" placeholder="验证码">
				<template v-slot:right>
					<tui-countdown-verify radius="80rpx" :successVal="successVal" :resetVal="resetVal" @send="send"></tui-countdown-verify>
				</template>
			</tui-input>
			<tui-input name="company_name" v-model="company_name" maxlength="20" padding="64rpx 0 20rpx" :lineLeft="false" :size="30" placeholder="企业名称">
			</tui-input>
			<tui-input name="area_name" v-model="area_name" maxlength="20" padding="64rpx 0 20rpx" :lineLeft="false" :size="30" placeholder="所属省市区" @tap="showPicker">
			</tui-input>
			<tui-input name="u_password" v-model="u_password" maxlength="20" :password="password" padding="64rpx 0 20rpx" :lineLeft="false" :size="30"
				placeholder="设置密码">
				<template v-slot:right>
					<tui-icon unit="rpx" :size="44" @click="change" :name="password?'unseen':'seen'" color="#ccc">
					</tui-icon>
				</template>
			</tui-input>
			<view class="tui-href__box">
				<view class="tui-href__item" @tap="protocol">
					<text class="tui-color__gray">注册即表示同意</text>
					<text>《安培一考通用户协议》</text>
				</view>
			</view>
			<view class="tui-btn__box">
				<tui-form-button :disabled="disabled" radius="80rpx" @click="reg">立即注册</tui-form-button>
			</view>
			<!--picker-view start-->
			<view class="tui-mask-screen" :class="[showPickerStatus?'tui-mask-show':'']" @tap="hidePicker"></view>
			<view class="tui-picker-box" :class="[showPickerStatus?'tui-pickerbox-show':'']">
				<view class="picker-header tui-list-item">
					<view class="btn-cancle" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="hidePicker">取消</view>
					<view class="btn-sure" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="picker">确定</view>
				</view>
				<picker-view indicator-style="height: 50px;" class="picker-view" :value="value" @change="columnPicker">
					<picker-view-column>
						<view v-for="(item,index) in proviceArr" :key="index" class="item">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in cityArr" :key="index" class="item">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in districtArr" :key="index" class="item">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<!--picker-view end-->
		</view>
		<!--居中消息-->
		<tui-tips ref="toast" backgroundColor="#5677fc" color="#ff0000" :size="30"></tui-tips>
	</view>
</template>

<script>
	import { isPhoneNumber } from "../../common/common.js"
	import cityData from '@/utils/picker.city.js'
	export default {
		computed: {
			disabled: function() {
				let bool = true;
				if (this.mobile && this.verification_code && this.company_name && this.u_password && this.area_name) {
					bool = false;
				}
				return bool;
			}
		},
		data() {
			return {
				top: 20,
				successVal: 0,
				resetVal: 0,
				mobile: '',
				verification_code: '',
				u_password: '',
				company_name: '',
				provinces_id: '',
				city_id: '',
				area_id: '',
				area_name: '',
				password: true,
				proviceArr: [],
				cityArr: [],
				districtArr: [],
				value: [0, 0, 0],
				showPickerStatus: false
			}
		},
		onLoad: function() {
			//初始化数据
			this.proviceArr = this.toArr(cityData);
			this.cityArr = this.toArr(cityData[0].children);
			this.districtArr = this.toArr(cityData[0].children[0].children)
		},
		methods: {
			toArr(object) {
				let arr = [];
				for (let i in object) {
					arr.push(object[i].text);
				}
				return arr;
			},
			//picker change切换事件
			columnPicker: function(e) {
				let value = e.detail.value;
				//如果两者下标不一致，表示滚动过
				if (this.value[0] !== value[0]) {
					this.proviceArr = this.proviceArr;
					this.cityArr = this.toArr(cityData[value[0]].children);
					this.districtArr = this.toArr(cityData[value[0]].children[0].children);
					this.value = [value[0], 0, 0]
				} else if (this.value[1] !== value[1]) {
					this.proviceArr = this.proviceArr;
					this.cityArr = this.cityArr;
					this.districtArr = this.toArr(cityData[value[0]].children[value[1]].children);
					this.value = [value[0], value[1], 0]
				} else {
					this.value = value
				}
			},
			//确定按钮
			picker: function(e) {
				let value = this.value;
				if (cityData.length > 0) {
					let provice = cityData[value[0]].text;
					this.provinces_id = cityData[value[0]].value;
					//console.log(provice)
					//console.log('省份=='+this.provinces_id)
					let city = cityData[value[0]].children[value[1]].text;
					this.city_id = cityData[value[0]].children[value[1]].value;
					//console.log('城市=='+this.city_id)
					let district = cityData[value[0]].children[value[1]].children[value[2]].text;
					this.area_id = cityData[value[0]].children[value[1]].children[value[2]].value;
					//console.log('区域=='+this.area_id)
					//this.text = [provice, city, district];
					this.area_name = provice+','+city+','+district;
					this.showPickerStatus = false
				}
			},
			initNavigation(e) {
				this.top = e.top;
			},
			back() {
				uni.navigateBack();
			},
			send(e) {
				var mobile = this.mobile.replace(/\s+/g,'');
				if(mobile == null || mobile == ''){
					setTimeout(() => {
						this.resetVal++;
						this.tui.toast('请输入您的手机号');
					}, 200);
					return;
				}
				if(!isPhoneNumber(this.mobile)){
					 setTimeout(() => {
					 	this.resetVal++;
					 	this.tui.toast('请填写正确的手机号');
					 }, 200);
					 return;
				}
				//实际应是请求接口，此处延时模拟请求
				setTimeout(() => {
					//接口请求成功后执行此代码
					this.verification_code = 123456;
					this.successVal++
				}, 1000)
				//实际应是请求接口，此处延时模拟请求
				/* setTimeout(() => {
					//接口请求成功后执行此代码
					this.successVal++
				}, 1000) */
			},
			reg() {
				//手机号验证
				var mobile = this.mobile.replace(/\s+/g,'');
				if(!isPhoneNumber(this.mobile)){
					 setTimeout(() => {
					 	this.resetVal++;
					 	this.tui.toast('请填写正确的手机号');
					 }, 200);
					 return;
				}
				//验证码验证--待完善（短信验证码校验）
				//var verification_code = this.verification_code.replace(/\s+/g,'');
				if(this.verification_code != '123456'){
					setTimeout(() => {
						this.tui.toast('验证码错误');
					}, 200);
					return;
				}
				//密码长度校验
				var u_password = this.u_password.replace(/\s+/g,'');
				if(u_password.length < 6){
					setTimeout(() => {
						this.tui.toast('密码长度不能小于6位');
					}, 200);
					return;
				}
				let _this = this;
				//注册接口
				_this.$api.user_reg(
				 {
				 mobile: _this.mobile,
				 company_name: _this.company_name,
				 provinces_id: _this.provinces_id,
				 city_id: _this.city_id,
				 area_id: _this.area_id,
				 area_name: _this.area_name,
				 u_password: _this.u_password
				 },
				 (res)=>{
					if(res.code==200){
						this.tui.href("/pages/login/login")
					}else{
						//this.tui.toast(res.msg)
						let options = {
							msg: res.msg,
							duration: 2000
						};
						setTimeout(() => {
							_this.$refs.toast.showTips(options);
						}, 300);
					}
				});
				
			},
			change() {
				this.password = !this.password
			},
			protocol(){
				this.tui.href("/pages/doc/protocol/protocol")
			},
			// 显示picker-view
			showPicker: function() {
				this.showPickerStatus = true
			},
			// 隐藏picker-view
			hidePicker: function() {
				this.showPickerStatus = false
			}
		}
	}
</script>

<style>
	.tui-color__gray {
		color: #999;
	}
	.tui-mask-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}
	.tui-picker-box {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
		background: #fff;
	}
	.tui-pickerbox-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
	.picker-header {
		width: 100%;
		height: 90rpx;
		padding: 0 46rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 32rpx;
		background: #fff;
	}
	.tui-list-item::after {
		left: 0;
	}
	.btn-cancle {
		padding: 20rpx;
		color: #888;
	}
	
	.btn-sure {
		padding: 20rpx;
		color: #5677fc;
	}
	.picker-view {
		width: 100%;
		height: 260px;
	}
	
	.item {
		line-height: 50px;
		text-align: center;
	}
</style>
